<template>
  <div class="text-item-wrapper" v-if="text"
    @mouseover="editState = !0"
    @mouseleave="editState = !1">
      <p>{{text}}</p>
      <el-row class="text-edit" :gutter="10" v-show="editState">
        <el-col :span="12">
          <span class="btn-edit" @click="handleChange">修改</span>
        </el-col>
        <el-col :span="12">
          <span class="btn-edit" @click="handleDelete">删除</span>
        </el-col>
      </el-row>
  </div>
</template>

<script>
  export default{
    props: {
      text: String,
      index: Number
    },
    data () {
      return {
        editState: !1
      }
    },
    methods: {
      handleChange () {
        this.$emit('changeText', 'edit', {
          text: this.text,
          index: this.index
        })
      },
      handleDelete () {
        this.$emit('deleteData', this.index)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .text-item-wrapper{
    &:hover{
      background-color: #f0f0f0;
    }
    position: relative;
    p{
      color:#333;
      word-wrap: break-word;
      word-break: break-all;
      line-height: 24px;
    }
    .text-edit{
      position: absolute;
      right: 2px;
      bottom: 2px;
      width: 92px;
      .btn-edit{
        display: block;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #333;
        cursor: pointer;
        background-color: #fff;
      }
    }
  }
</style>
